<template>
	<view>
		<ba-tree-picker ref="tree" :multiple='true' @select-change="treeConfirm" title="选择城市" confirmColor="#ee212d"
			titleColor="#ee212d" :selectParent="false" :localdata="districtList" valueKey="regionId" :textKey="rangeKey"
			:childrenKey="childKey" @cancel="filtrateShow=false" :selectedData="selectedData" />
	</view>
</template>

<script>
	// import tkiTree from "@/components/tki-tree/tki-tree.vue"
	import baTreePicker from '@/components/ba-tree-picker/ba-tree-picker.vue'
	import {
		getCityApi
	} from "@/api/api.js";
	import {
		getCityId
	} from '@/filters/commFilter.js'
	export default {
		props: {
			filtrateArr: {
				type: Array,
				default: () => [{
					type: '区域'
				}],
			},
			// dataType为area为区域 为city为城市
			dataType: {
				type: String,
				default: 'area'
			},
			multiple: {
				type: Boolean,
				default: true
			},
			selectedData: {
				type: Array,
				default: function() {
					return []
				}
			},
		},
		components: {
			baTreePicker
		},
		watch: {
			filtrateArr: {
				handler(newVal, oldVal) {
					if (newVal) {
						this.goInitArea();
					}
				},
				deep: true,
				immediate: true
			},

			filtrateShow(newVal) {
				if (newVal) {
					this.$refs.tree._show();
				}
			}
		},
		mounted() {

		},
		data() {
			return {
				cityId: 0,
				itemPadding: 24,
				itemFontSize: 28,
				itemHeight: 88,
				itemTextColor: '#666',
				activeColor: '#ee212d',
				show: true,
				filtrateShow: false,
				currentFiltrateAsideIndex: 0,
				currentFiltrateConterIndex: 0,
				bgcolor: '#fff',
				cityList: [],
				districtList: [],
				scrollTop: 0,
				districtIds: [], //已选区县id
				districtNames: [], //已选区县id
				provinceList: [],
				rangeKey: 'regionName',
				childKey: 'child',
				formData: {
					selectedArr: [],
					selectedString: ''
				},
			}
		},
		methods: {
			async goInitArea() {
				try {

					let {
						data
					} = await getCityApi({
						status: this.dataType == 'city' ? 1 : ''
					});

					this.districtList = data;
				} catch (e) {
					console.log(e)
					//TODO handle the exception
				} finally {}
			},

			//点击确认
			filtrateConfirm(data) {
				let res = {}
				if (this.dataType == 'area') {
					res = {
						districtIds: data.ids.join(','),
						regionName: data.names,
						hopeProvince: data.pc[0],
						hopeCity: data.pc[1],
					}
				} else {
					res = {
						citys: data.ids.join(','),
						cityNames: data.names,
						province: data.pc[0],
					}
				}
				console.log(res)
				this.$emit('area', res);
				this.filtrateShow = false
			},
			treeConfirm(ids, names, selItems) {
				// let ids = [];
				// let names = [];
				let pc = []
				console.log("pc", selItems)
				if (selItems) {

					if (this.dataType == 'area') {
						selItems.forEach(item => {
							let d = this.districtList.filter(it => it.child ? it.child.findIndex(itc => itc
								.regionId ==
								item.parentId) > -1 : false);
							if (d.length > 0) {
								if (pc.indexOf(d[0].regionId) == -1) {
									pc.push(d[0].regionId)
								}

								let m = d[0].child.filter(it => it.regionId == item.parentId);
								if (m.length > 0) {
									if (pc.indexOf(m[0].regionId) == -1) {
										pc.push(m[0].regionId)
									}

								}
							}
						})
					} else if (this.dataType == 'city') {
						selItems.forEach(item => {
							pc.push(item.parentId)
						})
					}

				}

				this.filtrateConfirm({
					ids,
					names,
					pc
				})
			},


		}
	}
</script>

<style>

</style>